<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>购物车 - 商城</title>
		<%@ include file="/common/include/title.jsp" %>
		<script type="text/javascript">
			/* 全选 */
			function selectFun(selectAllId,beiSelect)
			{
				//alert("====>" + $("#" + selectAllId).prop("checked") )
				/* 全选的钮,其实就是让被选项的选中效果和全选的效果一致就可以 */
				/* 如何取到所有被选项的元素 */
				//alert("====" + $("input[name=goodsIds]").size());
				
				$("input[name=goodsIds]").prop("checked",$("#" + selectAllId).prop("checked"));
			}
			
			/**
				提交前确认
			*/
			function formConfrim()
			{
				var flag = window.confirm("您确认要操作吗?");
				/* 肯定一个都木有选择 */
				var checkFlag = true ; 
				/* 表单提交的时候,至少选择一个 */
				$("input[name=goodsIds]").each(function ()
				{
					/* 如果返回值为true; 表示选中,为false表示木有选择 */
					/* alert($(this).prop("checked")) */
					if($(this).prop("checked") && checkFlag)
					{
						checkFlag = false ; 
					}
				});
				
				/* 点击提交的时候,必须选择一个呢?  */
				if(checkFlag)
				{
					/* 肯定一个都木有选择 */
					alert("至少选择一个");
					return false ; 
				}
				return flag ; 
			}
			
			/**
				点击去结算之前,获取用户选择了哪些商品,然后去结算
			*/
			function selectGoods()
			{
				var flag = window.confirm("您确认要操作吗?");
				/* 肯定一个都木有选择 */
				var checkFlag = true ; 
				/* 表单提交的时候,至少选择一个 */
				$("input[name=goodsIds]").each(function ()
				{
					/* 如果返回值为true; 表示选中,为false表示木有选择 */
					/* alert($(this).prop("checked")) */
					if($(this).prop("checked") && checkFlag)
					{
						checkFlag = false ; 
					}
				});
				
				/* 点击提交的时候,必须选择一个呢?  */
				if(checkFlag)
				{
					/* 肯定一个都木有选择 */
					alert("至少选择一个");
					return false ; 
				}
				
				var usersCarIds = "${rootPath }/head/orders/ordersInsert.html?id=1" ; 
				/* 表单提交的时候,至少选择一个 */
				$("input[name=goodsIds]").each(function ()
				{
					/* 如果返回值为true; 表示选中,为false表示木有选择 */
					/* alert($(this).prop("checked")) */
					if($(this).prop("checked"))
					{
						//alert($(this).attr("usersCarId")); 
						usersCarIds = usersCarIds + "&usersCarIds=" + $(this).attr("usersCarId") ;
					}
				});
				//alert("====>" + usersCarIds);
				/* 将拼装好的url赋值给a链接(结算的a链接) */
				$("#jiesuan").attr("href",usersCarIds)
				return true ; 
			}
		</script>
	</head>
	<body>
		<%-- <%@ include file="/common/include/header.jsp"%> --%>
		<%-- 如果包含的页面中数据是活的,需要访问Contrller查询数据库只能使用动态包含 --%>
		<!-- 动态包含可以带参数?相当于?后面的内容
				header.html?cateIdTemp=${requestScope.cateId}
			 -->
		<jsp:include page="/header.html">
			<jsp:param value="${requestScope.cateId}" name="cateIdTemp"/>
		</jsp:include>
		<div id="mainBody">
			<div class="container">
				<div class="row">
					<!-- Sidebar ================================================== -->
					<div id="sidebar" class="span3">
						<div class="well well-small">
							<a id="myCart" href="product_summary.html"><img
								src="themes/images/ico-cart.png" alt="cart">3 Items in your
								cart <span class="badge badge-warning pull-right">$155.00</span></a>
						</div>
						<ul id="sideManu" class="nav nav-tabs nav-stacked">
							<li class="subMenu open"><a> ELECTRONICS [230]</a>
								<ul>
									<li><a class="active" href="products.html"><i
											class="icon-chevron-right"></i>Cameras (100) </a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Computers, Tablets & laptop
											(30)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Mobile Phone (80)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Sound & Vision (15)</a></li>
								</ul></li>
							<li class="subMenu"><a> CLOTHES [840] </a>
								<ul style="display: none">
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Women's Clothing (45)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Women's Shoes (8)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Women's Hand Bags (5)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Men's Clothings (45)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Men's Shoes (6)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Kids Clothing (5)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Kids Shoes (3)</a></li>
								</ul></li>
							<li class="subMenu"><a>FOOD AND BEVERAGES [1000]</a>
								<ul style="display: none">
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Angoves (35)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Bouchard Aine & Fils (8)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>French Rabbit (5)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Louis Bernard (45)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>BIB Wine (Bag in Box) (8)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Other Liquors & Wine (5)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Garden (3)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Khao Shong (11)</a></li>
								</ul></li>
							<li><a href="products.html">HEALTH & BEAUTY [18]</a></li>
							<li><a href="products.html">SPORTS & LEISURE [58]</a></li>
							<li><a href="products.html">BOOKS & ENTERTAINMENTS [14]</a></li>
						</ul>
						<br />
						<div class="thumbnail">
							<img src="themes/images/products/panasonic.jpg"
								alt="Bootshop panasonoc New camera" />
							<div class="caption">
								<h5>Panasonic</h5>
								<h4 style="text-align: center">
									<a class="btn" href="product_details.html"> <i
										class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i
										class="icon-shopping-cart"></i></a> <a class="btn btn-primary"
										href="#">$222.00</a>
								</h4>
							</div>
						</div>
						<br />
						<div class="thumbnail">
							<img src="themes/images/products/kindle.png"
								title="Bootshop New Kindel" alt="Bootshop Kindel">
							<div class="caption">
								<h5>Kindle</h5>
								<h4 style="text-align: center">
									<a class="btn" href="product_details.html"> <i
										class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i
										class="icon-shopping-cart"></i></a> <a class="btn btn-primary"
										href="#">$222.00</a>
								</h4>
							</div>
						</div>
						<br />
						<div class="thumbnail">
							<img src="themes/images/payment_methods.png"
								title="Bootshop Payment Methods" alt="Payments Methods">
							<div class="caption">
								<h5>Payment Methods</h5>
							</div>
						</div>
					</div>
					<!-- Sidebar end=============================================== -->
					<div class="span9">
						<ul class="breadcrumb">
							<li><a href="${rootPath }/main.html">首页</a>
							<span class="divider">/</span></li>
							<li class="active">购物车列表</li>
						</ul>
						<h3>
							购物车列表
							 [ <small>${fn:length(requestScope.usersCarList) } 件 </small>]
							 <a href="${rootPath }/goods.html" class="btn btn-large pull-right">
							 	<i class="icon-arrow-left"></i>
								继续购物
							</a>
						</h3>
						<hr class="soft" />
						<!-- 要想让复选提交给后台,都要加一个表单 -->
						<form method="post" action="${rootPath}/carDelete.html" onsubmit="return formConfrim()">
							<table class="table table-bordered">
								<thead>
									<tr>
										<th><input type="checkbox" id="selectAll" onclick="selectFun('selectAll','goodsIds')"></th>
										<th>序号</th>
										<th>商品</th>
										<th>名字</th>
										<th>数量</th>
										<th>市场价</th>
										<th>折扣后价</th>
										<th>总价格</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<%--
										for(int stat = 0 ; stat < usersCarList.size(); stat ++)
										{
											usersCar = usersCarList.get(stat);
											
										}
									 --%>
									<c:set value="0" var="totalMarketPrice"/>
									<c:set value="0" var="totalZhePrice"/>
									<c:forEach items="${requestScope.usersCarList }" var="usersCar" varStatus="stat">
										<!-- 设置值 -->
										<c:set value="${totalMarketPrice +  usersCar.goods.marketPrice * usersCar.num}" var="totalMarketPrice"/>
										<c:set value="${totalZhePrice +  (usersCar.goods.marketPrice - usersCar.goods.price) * usersCar.num}" var="totalZhePrice"/>
										<tr>
											<!--  用户未登陆,操作的是Cookie,木有购物车id
												只有登陆的时候才有
											 -->
											<td><input usersCarId="${usersCar.id }" type="checkbox" name="goodsIds" value="${usersCar.goodsId}"></td>
											<td>
												${stat.count }
											</td>
											<td>
												<a href="${rootPath }/goods/${usersCar.goods.url}.html" target="_blank">
													<c:choose>
														<c:when test="${usersCar.goods.listImgPath != null && usersCar.goods.listImgPath!= ''}">
															<img title="${usersCar.goods.name }" src="${usersCar.goods.listImgPath}" alt=""  height="60" width="60"/>
														</c:when>
														<c:otherwise>
															<img title="${usersCar.goods.name }" src="${rootPath }/imgs/no_pic.gif" alt="" height="60" width="60"/>
														</c:otherwise>
													</c:choose>
												</a>
											</td>
											<td title="${usersCar.goods.name }">
												<a href="${rootPath }/goods/${usersCar.goods.url}.html" target="_blank">
													${fn:substring(usersCar.goods.name,0,20)}<br />
													<!-- Color : black, Material : metal -->
												</a>
											</td>
											<td>
												${usersCar.num}
											</td>
											<td>Y${usersCar.goods.marketPrice }</td>
											<td>Y${usersCar.goods.price }</td>
											<td>Y${usersCar.goods.price * usersCar.num}</td>
											<td>
												<button class="btn btn-danger" type="button">
													<i class="icon-remove icon-white"></i>
												</button>
											</td>
										</tr>
									</c:forEach>
									<!-- 总计的价格只能是在循环的时候计算 -->
									<tr>
										<td colspan="7" style="text-align: right">总市场价:</td>
										<td>Y${totalMarketPrice}</td>
									</tr>
									<tr>
										<td colspan="7" style="text-align: right">总折扣:</td>
										<td>Y${totalZhePrice }</td>
									</tr>
									<tr>
										<td>
											<button class="btn btn-danger" type="submit">
												<i class="icon-remove icon-white"></i>
											</button>
										</td>
										<td colspan="6" style="text-align: right">
											<strong>
												共计:(Y${totalMarketPrice} - Y${totalZhePrice }) =
											</strong>
										</td>
										<td class="label label-important" style="display: block">
											<strong> Y${totalMarketPrice - totalZhePrice } </strong>
										</td>
									</tr>
								</tbody>
							</table>
						</form>
						<a href="${rootPath }/goods.html" class="btn btn-large">
							<i class="icon-arrow-left"></i>
							继续购物
						</a>
						<a href="" id="jiesuan" onclick="return selectGoods()" class="btn btn-large pull-right">
							结算
							<i class="icon-arrow-right"></i>
						</a>
					</div>
				</div>
			</div>
		</div>
		<!-- MainBody End ============================= -->
		<%@ include file="/common/include/footer.jsp" %>
	</body>
</html>